<template>
  <div class="dash">
    <div>
      <chrome-outlined style="fontSize:48px;color:green" />
      <section>
        <p>产品管理</p>
        <span>{{ data.products }}</span>
      </section>
    </div>
    <div>
      <copy-two-tone style="fontSize:48px" />
      <section>
        <p>Banner管理</p>
        <span>{{ data.banner }}</span>
      </section>
    </div>
    <div>
      <reddit-outlined style="fontSize:48px;color:red" />
      <section>
        <p>关于我们</p>
        <span>{{ data.about }}</span>
      </section>
    </div>
    <div>
      <wechat-outlined style="fontSize:48px;color:green" />
      <section>
        <p>用户</p>
        <span>{{ data.users }}</span>
      </section>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { getNum } from "@/api/dashboard";
import {
  RedditOutlined,
  CopyTwoTone,
  WechatOutlined,
  ChromeOutlined,
} from "@ant-design/icons-vue";
import {} from "@ant-design/icons-vue";
const data: any = reactive({
  products: 0,
  banner: 0,
  about: 0,
  users: 0,
});
getNum("products").then((res) => {
  data.products = res;
});
getNum("banner").then((res) => {
  data.banner = res;
});
getNum("about").then((res) => {
  data.about = res;
});
getNum("users").then((res) => {
  data.users = res;
});
</script>

<style scoped lang="scss">
.dash {
  display: flex;
  justify-content: space-between;
  height: 100%;
  div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    span {
      font-size: 16px;
    }
    background-color: #ccc;
    height: 108px;
    width: 20%;
  }
}
</style>